<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用标签形式，引入自己的组件 -->
			<mycom1></mycom1>
			
		</div>
		<!-- 在#app外边，使用 template元素定义组件HTML模板结构-->
		<template id="tmp1">
			<div>
				<h2>nnnnnnn</h2>
				<h3>hjhkjhjkh</h3>
				<span>{{msg}}</span>
			</div>
		</template>
		<script>
			//组件可以有自己的data数据
			//组件的data和实例data不一样，实例data可以是一个对象，但是组件中的data必须是一个方法
			//组件中的data除了要有个方法，还必须返回一个对象才行
			//使用方式和实例中的msg一样
			Vue.component('mycom1', {
				template: '#tmp1',
				data:function(){
					return {
						msg:'dsadsad'
					}
				}
			})
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {}
			})
		</script>
	</body>
</html>
